<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../res/layui/css/layui.css" media="all">
<script src="../res/layui/layui.js"></script>
		<script src="../js/global.js"></script>
</head>

<body>

      <div class="layui-container">
			<div id="detailDiv" class="layui-row layui-col-space10">
				<!--图片-->
				<div id="tupian" class="layui-col-sm5" style="margin-top: 20px;">
				
				</div>
				<!--form表单-->
				<div class="layui-col-sm7" style="margin-top: 10px;">
	            <form id='form_add' class="layui-form" action=""
	          style="width: 60%; margin-top: 10px;" lay-filter="form_add">
		<div class="layui-form-item">
			<label class="layui-form-label">商品名称</label>
			<div class="layui-input-block">
				<input type="text" name="pname" placeholder="" autocomplete="off"
					class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">简介</label>
			<div class="layui-input-block">
				<input type="text" name="pIntroduction" placeholder=""
					autocomplete="off" class="layui-input">
			</div>
		</div>


		<div class="layui-form-item">
			<label class="layui-form-label">类别</label>
			<div class="layui-input-block">
				<select id="categoryid" name="categoryid" lay-verify="" lay-search>
					<option value=""></option>
				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">价格</label>
			<div class="layui-input-block">
				<input type="text" name="price" placeholder="" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品数量</label>
			<div class="layui-input-block">
				<input type="text" name="pnumber" placeholder="" autocomplete="off"
					class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">颜色</label>
			<div class="layui-input-block">
				<input type="text" name="pcolor" placeholder="" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">大小</label>
			<div class="layui-input-block">
				<input type="text" name="size" placeholder=""
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">状态</label>
			<div class="layui-input-block">
				<select id="pcanuse" name="pcanuse" lay-verify="" lay-search>
					<option value=""></option>
					<option value="0">上架</option>
					<option value="1">下架</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
							<label class="layui-form-label">图片路径</label>
							<div class="layui-input-block">
								<input type="text" id="picurl" name="picurl" readonly placeholder="" autocomplete="off" class="layui-input">
							</div>
						</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="add_submit">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				<button type="button" class="layui-btn" id="test1"> 上传图片</button>
			</div>
		</div>
	</form>
	</div>
	</div>
	</div>
</body>

<script>
layui.use(['layer', 'form','upload'], function() {
	var $ = layui.$ //jquery
		,
		layer = layui.layer //弹层
		,
		form = layui.form //表单
		,
		upload = layui.upload;
		
	  //获取url参数的方法	
	  function getQueryVariable(variable){
		       var query = window.location.search.substring(1);
		       var vars = query.split("&");
		       for (var i=0;i<vars.length;i++) {
		               var pair = vars[i].split("=");
		               if(pair[0] == variable){
		                  return decodeURIComponent(pair[1]);
		               }
		       }
		       return(false);
		}
	  //测试获取url参数
	  var str = getQueryVariable("searchKey");
	  layer.alert(str);

	  //文件上传实例
	  var uploadInst = upload.render({
	    elem: '#test1' //绑定元素
	    ,url: globalData.server + "/file/image" //上传接口
	    ,done: function(res){
	      //上传完毕回调   显示图片路径
	      $("#picurl").val(res.data)
	      $("#tupian").html("")
	      $("#tupian").append($("<img src='"+globalData.server+res.data+"' style='width: 90%;' />"))
	    }
	    ,error: function(){
	      //请求异常回调
	      console.log("网络异常")
	    }
	  });		


		//加载班级下拉框
		$.post("http://localhost:8080/g4/products/selsctOpResults", {},
				function(result) {
					if (result.code === '0') {
						$.each(result.data, function(index, item) {
							$('#categoryid').append(
									new Option(item.value, item.view));// 下拉菜单里添加元素
						});
						form.render('select');

					} else {
						layer.alert(result.msg);
					}
				}, "json");

		//点击添加按钮
		form.on('submit(add_submit)', function(data) {
			var str = $("#form_add").serialize();
			$
					.post("http://localhost:8080/g4/products/addOne",
							str, function(result) {
								if (result.code === '0') {
									parent.layer.alert(result.msg);

									//当你在iframe页面关闭自身时
									var index = parent.layer
											.getFrameIndex(window.name); //先得到当前iframe层的索引
									parent.layer.close(index); //再执行关闭   
									parent.layui.$("#shousuo").click();

								} else {
									layer.alert(result.msg);
								}
							}, "json");
			return false;
		});
	});
</script>

</html>